<template>
  <div class=""></div>
</template>

<script setup lang="ts">
  import { ref, unref, reactive, onMounted } from 'vue'

  // ======================== Map 集合类型=====================
  //   可迭代
  const m = new Map([
    ['key1', 'val1'],
    ['key2', 'val2'],
    ['key3', 'val3'],
    ['key4', 'val4']
  ])
  // for (const key of m.keys()) {
  //   console.log(key, 'mmmm key')
  // }
  console.log(m, 'mmmm')
  console.log(m.keys(), 'mmmm keys')
  console.log(m.values(), 'mmmm values')
  console.log(m.entries(), 'mmmm entries')

  // ======================== WeakMap 集合类型 =====================
  //   不可迭代（不可枚举）  可打印查看它的原型方法没有keys、values、entries
  const key1 = { id: 1 }
  const key2 = { id: 2 }
  const key3 = { id: 3 }
  const wm = new WeakMap().set(key1, 'val1')
  wm.set(key2, 'val2').set(key3, 'val3')

  console.log(wm, 'wm')
  // for (const key of wm.keys()) {
  // }

  // ======================== Set 集合类型 =====================
  const s = new Set(['val1', 'val2', 'val3'])
  console.log(s, 'sss')

  //   多个添加操作连缀写法
  const ss = new Set().add('val1').add('val2').add('val3')
  console.log(ss, 'ss连缀写法')
</script>

<style lang="less" scoped></style>
